<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p7_相对定位</title>
  <style>
    .fu {
      background-color:#ff0;
    }
    .fu>div {
      width: 100px;
      height: 100px;
    }
    .z1 {
        background-color: red;
        position: relative;
        z-index: 10;
    }
    .z2 {
        background-color: lime;
        /*相对定位:参照物为自己的原来位置，不会脱离文档(释放布局空间)*/
        position: relative;
        /*使用定位属性后就可以在四个方向微调自己的位置*/
        bottom: 50px;
        right: 50px;
        /*可以使用z-index调整层级，整数，无单位，数字越大层级越靠上，可以设置负数*/
        z-index: 11;
    }
    .z3 {
        background-color: blue;
        position: relative;
        /*z-index: -100;*/
    }
  </style>
</head>
<body>
<div class="fu">
  <div class="z1"></div>
  <div class="z2"></div>
  <div class="z3"></div>
</div>
</body>
</html>